<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/register.css" />
    <link rel="stylesheet" type="text/css" href="css/setting.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="setting" class="bg1">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">个人消息</h1>
	</header>
	<section>
	    <div class="cont-wrap bgWhite">
	        <div class="functionList">
	            <div class="list display-box">
	                <a href="####" class="display-box" id="set-avatar">
	                    <div class="title Center"><h1>更改头像</h1></div>
	                    <div class="arrow Center avater-img"><img alt="" src="image/7204816_174933648126_2.png"><span class="mui-icon mui-icon-arrowright"></span></div>
	                </a>
	            </div>
	        </div>
	    </div>
	    <div class="cont-wrap bgWhite">
	        <div class="functionList">
	            <div class="list display-box">
	                <a href="####" class="display-box">
	                    <div class="title Center"><h1>更改昵称</h1></div>
	                    <div class="arrow Center">
	                    	<div class="edit-nickname">
	                    		<span class="nickname">name</span>
	                    		<span class="mui-icon mui-icon-arrowright"></span>
	                    	</div>
	                      </div>
	                </a>
	            </div>
	            <div class="list display-box">
	                <a href="xgmm.html" class="display-box">
	                    <div class="title Center"><h1>修改密码</h1></div>
	                    <div class="arrow Center"><span class="mui-icon mui-icon-arrowright"></span></div>
	                </a>
	            </div>
	        </div>
	    </div>
	    <input type="button" name="" id="log-out" value="退出登录" />
	    <div class="choice-box" id="choice-box">
			<ul>
				<li id="camera">拍照</li>
				<li id="gallery">从相册选择</li>
			</ul>
			<span id="cancel">取消</span>
		</div>
	</section>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/fastclick.js"></script>
	<script>
	  	$(function() {
			FastClick.attach(document.body);
	  	});
	  	mui.init();
	  	mui.ready(function(){
			var choice_box = document.getElementById('choice-box')
			
			var mask = mui.createMask(function(){
				choice_box.classList.remove('show')
			})
			document.getElementById('set-avatar').addEventListener('tap',function(){
				mask.show()
				choice_box.classList.add('show')
			})
			mui('.choice-box').on('tap','*',function(){
				choice_box.classList.remove('show')
				mask.close()
				if(this.id == 'camera'){
					var cmr = plus.camera.getCamera();  
			        var res = cmr.supportedImageResolutions[0];  
			        var fmt = cmr.supportedImageFormats[0];  
			        cmr.captureImage(function(path) {
			            //plus.io.resolveLocalFileSystemURL(path, function(entry) {  
			            plus.io.resolveLocalFileSystemURL(path, function(entry) {
			                var localUrl = entry.toLocalURL();
			                plus.zip.compressImage({
			                    src: localUrl,
			                    dst: "_doc/chat/camera/" + localUrl,
			                    quality: 20,
			                    overwrite: true
			                }, function(e) {
			                	console.log(e)
			                	uploadimge(e.target);
			            		document.getElementById('avatar').style.backgroundImage = 'url('+e.target+')';
			                }, function(err) {
			                    console.log("压缩失败：  " + err.message);
			                });
			            });
			        }, function(err) {
			            console.error("拍照失败：" + err.message);  
			        }, {
			            index: 1  
			        });  
				}
				else if(this.id == 'gallery'){
					plus.gallery.pick(function(path) {
			            plus.zip.compressImage({
			                src: path,
			                dst: "_doc/chat/gallery/" + path,
			                quality: 20,
			                overwrite: true
			            }, function(e) {
			            	console.log(e)
			            	uploadimge(e.target);		            		document.getElementById('avatar').style.backgroundImage = 'url('+e.target+')'

			            }, function(err) {  
			                console.error("压缩失败：" + err.message);  
			            });  
			  
			        }, function(err) {});  
				}
			})
			
		})
	  	
//	  	document.getElementById('log-out').addEventListener('tap',function(){
//			login-out();
//			plus.webview.getLaunchWebview().show();
//		});
		
		//事件：修改昵称
			document.addEventListener('set-nickname',function(event){
				
				$('.nickname').html(event.detail.nickname);
			})
		
			 //上传图片，实例中没有添加上传按钮
        function uploadimge(src) {
	        //plus.storage.clear();
	         var wa = plus.nativeUI.showWaiting();
	   
	//       alert(token); alert(http);
	         var task = plus.uploader.createUpload(getHttp('account/profile',true), {
	                method: "POST"
	            },
	            function(t, status) {
	                if (status == 200) {
	                
	            
	                    var data=JSON.parse(t.responseText);
	                
	                    if(data.code==200){
	                    	 window.localStorage.setItem('head',data.data.head);	
	                    	 window.localStorage.setItem('points',data.data.points);
							 window.localStorage.setItem('coin',data.data.coin);
	
							//@todo 刷新用户界面
							 mui.toast(data.msg);
	                          
	                    }else{
	                    	mui.toast(data.msg);
	                    }
	               
	
					wa.close();
	                } else {
							
	                    
	                    mui.toast("网络错误");
	                    wa.close();
	                }
	            }
	        );
	//                      task.addData('token',token);
	        task.addFile(src,{key:"userpic"});
			task.start();
        }
	</script>
</body>
</html>
